<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <!-- 引入swiper轮播图css插件 -->
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="/libs/font/iconfont.css">
    <link rel="stylesheet" href="/css/ListPage.css">
</head>

<body>
    <!-- header -->
    <header></header>

    <!-- 轮播图 -->
    <div class="swiper-container lunbo">
        <div class="swiper-wrapper">
            <!-- 需要轮播多少张图就,创建多少个swiper-slide div -->
            <div class="swiper-slide">
                <img src="/images/ListPage/01.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/ListPage/02.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/ListPage/03.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/ListPage/04.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/ListPage/05.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 列表 -->
    <section>
        <!-- 选项卡 -->
        <div id="tab">
            <button id="but_01">休闲</button>
            <button id="but_02">商务</button>
        </div>
        <!-- 导航链接 -->
        <div id="NavLinks">
            <li>
                <a href="#NPD">新品</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
            <li>
                <a href="#CDY">灯芯绒</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
            <li>
                <a href="#FEL">法兰绒</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
            <li>
                <a href="#OFD">牛津纺</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
            <li>
                <a href="#WCN">水洗棉</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
            <li>
                <a href="#LST">麻衬衫</a>
                <img src="/images/ListPage/point137.png" alt="">
            </li>
        </div>



        <!-- 新品 -->
        <img src="/images/ListPage/chpdg_03_02.jpg" alt="" style="margin-top: 20px;" id="NPD">
        <!-- 新品列表 -->
        <div id="NewProducts" class="list">
        <!--  
            <a href="/html/details.html?id={{item.id}}">
                <img src="/images/ListPage/6386590-1j201910301435186227.jpg" alt="">
                <p>
                    日式免烫衬衫温莎领 
                    <span>紫色小</span>
                    <span>¥398</span>
                </p>
            </a>
        -->
        </div>
        <!-- 新品列表模板 -->
        <script type="text/html" id="Template_01">
            {{each NewProducts item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <!-- 在这里将id拼接到网址路径中,就能够实现用唯一ID在详情页打开的也是这个商品,但是因为我们这理用的是假数据,所以用个id号来随便匹配一个数据显示在详情页就行 -->
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>



        <!-- 灯芯绒 -->
        <img src="/images/ListPage/corduroy.jpg" alt="" id="CDY">
        <div id="corduroy" class="list">
            <!-- 这几个的内部样式都是一样的所以使用一个css样式就可以了 -->
        </div>
        <!-- 灯芯绒列表模板 -->
        <script type="text/html" id="Template_02">
            {{each corduroy item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>


        
        <!-- 法兰绒 -->
        <img src="/images/ListPage/Flannel.jpg" alt="" id="FEL">
        <div id="Flannel" class="list">

        </div>
        <!-- 法兰绒列表模板 -->
        <script type="text/html" id="Template_03">
            {{each Flannel item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>



        <!-- 牛津纺 -->
        <img src="/images/ListPage/Oxford.jpg" alt="" id="OFD">
        <div id="Oxford" class="list">

        </div>
        <!-- 牛津纺列表模板 -->
        <script type="text/html" id="Template_04">
            {{each Oxford item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>



        <!-- 水洗棉 -->
        <img src="/images/ListPage/WashedCotton.jpg" alt="" id="WCN">
        <div id="WashedCotton" class="list">

        </div>
        <!-- 水洗棉列表模板 -->
        <script type="text/html" id="Template_05">
            {{each WashedCotton item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>



        <!-- 麻衬衫 -->
        <img src="/images/ListPage/LinenShirt.jpg" alt="" id="LST">
        <div id="LinenShirt" class="list">

        </div>
        <!-- 麻衬衫列表模板 -->
        <script type="text/html" id="Template_06">
            {{each LinenShirt item,index}}
                <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p>
                        {{item.tittle}} 
                        <span>{{item.col}}</span>
                        <span>¥{{item.Price}}</span>
                    </p>
                </a>
            {{/each}}
        </script>
    </section>

    <!-- footer -->
    <footer></footer>

    <script src="/libs/require/require.min.js" data-main="/js/ListPage"></script>

    
</body>

</html>